<template>
  <div class='w-full h-full' ref='tablecontainer'>
    <div v-if='props.showctl' class='w-full h-10 flex justify-between items-center'>
      <div></div>
      <div>
        <n-popover trigger='click' placement='bottom'>
          <template #trigger>
            <n-icon size='25' class='mx-1'>
              <SettingOutlined></SettingOutlined>
            </n-icon>
          </template>
          <div class='w-350px flex flex-col'>
            <div class='w-full flex justify-between items-center'>
              <div>
                <n-switch v-model:value='allshow' @update:value='changeshow' />
                列显示
              </div>
              <n-button text class='text-blue-500 dianji' @click='chongzhi'>重置</n-button>
            </div>
            <n-data-table
              :columns='thiscolnums'
              :data='props.column'
              :bordered='false'
              :size='tablesize'
            ></n-data-table>
          </div>
        </n-popover>
        <n-dropdown trigger='hover' @select='handleSelect' :options='sizeoptions'>
          <n-icon size='25' class='mx-1'>
            <TextFontSize24Filled></TextFontSize24Filled>
          </n-icon>
        </n-dropdown>
      </div>
    </div>
    <n-data-table
      :columns='newcolumn'
      :data='props.tabledata'
      :bordered='false'
      :size='tablesize'
      :max-height='tableHeight'
      :row-class-name='rowClassName'
      :loading='props.loading'
    >
      <template #empty>
        <n-result
          description='空的'
        >
          <template #icon>
            <n-image width='70' height='70' :src='kong.url' preview-disabled></n-image>
          </template>
        </n-result>
      </template>
    </n-data-table>
  </div>
</template>

<script setup name='flextable' lang='ts'>
import { h, ref, defineProps, computed, watch, onMounted, onUnmounted } from 'vue'
import {
  SettingOutlined,
  CheckOutlined,
} from '@vicons/antd'
import { TextFontSize24Filled } from '@vicons/fluent'
import { NSwitch, NIcon, NDataTable, NButton, NSpace } from 'naive-ui'
import kongimg from '@/assets/img/kong.webp'

const kong = ref({
  url: kongimg,
})
const tablecontainer = ref(null)
const props = defineProps({
  column: {
    default(data: any) {
      if (Array.isArray(data)) {
        return data
      } else {
        return [data]
      }
    },
  },
  tabledata: {
    default(data: any) {
      if (Array.isArray(data)) {
        return data
      } else {
        return [data]
      }
    },
  },
  // 是否显示顶部的控制
  showctl: {
    type: Boolean,
    default: true,
  },
  // loading状态控制
  loading: {
    type: Boolean,
    default: false,
  },
})
const tablesize = ref('small')
// 选中的图标，就是个对号
const tubiao = h(NIcon, { size: 20, color: 'blue' }, {
  default() {
    return [h(CheckOutlined, null, null)]
  },
})
// 测试控制行高
const rowClassName = ref('')
const tableHeight = ref(150)   // 图标的高度
const sizeoptions = ref([
  {
    label: '紧凑', key: 'small', icon: () => {
      return tablesize.value === 'small' ? tubiao : null
    },
  },
  {
    label: '默认', key: 'medium', icon: () => {
      return tablesize.value === 'medium' ? tubiao : null
    },
  },
  {
    label: '宽松', key: 'large', icon: () => {
      return tablesize.value === 'large' ? tubiao : null
    },
  },
])
// 过滤后的字段属性
const newcolumn = computed(() => {
  return props.column.filter(item => item.show)
})
// 选择某个字段
const handleSelect = (key) => {
  tablesize.value = key
}
// 顶部状态
const allshow = ref(true)
// 顶部开关
const changeshow = (jieguo) => {
  props.column.forEach(item => {
    item.show = jieguo
  })
}
// 开关修改的回调
const changeValue = (val, item) => {
  item.show = val
}
// 控制表的列名
const thiscolnums = ref([
  {
    title: '是否显示', width: 100, render: (rowData) => {
      return h(NSwitch, {
        value: rowData.show, 'onUpdate:value': (val) => {
          changeValue(val, rowData)
        },
      }, {
        default() {
          return ''
        },
      })
    },
  },
  { title: '列名', key: 'title', width: 100 },
  {
    title: '展示顺序', width: 140, render: (rowData, rowIndex) => {
      return h(NSpace, null, ()=>{return [
        h(NButton, { size: 'small' }, {
          default() {
            return '上移'
          },
        }),
        h(NButton, { size: 'small' }, {
          default() {
            return '下移'
          },
        }),
      ]})
    },
  },
])
// 点击重置
const chongzhi = () => {
  allshow.value = true
  changeshow(allshow.value)
}

// 计算表格的高度
const calculation = () => {
  if (tablecontainer.value) {
    // 外壳的高度，减去自己的顶部div和外层底部的分页高度
    tableHeight.value = tablecontainer.value.offsetHeight - 40 - 46
  } else {
    tableHeight.value = 150
  }
  console.log(tableHeight.value, '现在的高度')
}

// 监听区域
watch(() => props.tabledata, () => {
  calculation()
})
// 生命周期区域
onMounted(() => {
  calculation()
  window.addEventListener('resize', () => {
    calculation()
  })
})
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    calculation()
  })
})
</script>

<style scoped>

</style>
